<template>
	<div class="page">
		<div class="bill-list">
			<div class="bill-item">
				<div class="top">
					<div class="top-left">
						<div class="bill-title">{{billItem.billWord}}</div>
						
						
						<div class="bill-word">
						{{billItem.billAuthor}}
						<span v-if="fansFlag" style="font-size:10px;background-color:#eee;color:999;padding:2px 3px;">已关注</span>
						</div>
						
						
						</div>
						<div class="top-right">
							<div class="bill-follow" @click="doSubscribe(billItem)">{{fansFlag?"取消关注":"加关注"}}</div>
						</div>
				</div>

				<div class="bill-image">
					<img :src="billItem.billPic" />
				</div>
				<div class="time">
					<div class="bill-time">{{formatDate(billItem.billTime)}}</div>
				</div>
			</div>
			<div class="box">
	
			<i :class="{'el-icon-star-off':!praiseFlag,'el-icon-star-on':praiseFlag}" @click="shoucang" ></i>
			<i class="el-icon-s-comment" @click="rootReply"></i>
			
			</div>
		<div class="comment-panel">
			<commentitem 
				:showDelete="true" 
				:commentList="commentList" 
				v-on:commentClick="commentClick"
				v-on:deleteClick="deleteClick"
				></commentitem>
		</div>
		<div class="bottom-input">
			<input  type="text" v-model="commentText" placeholder="我也说两句" />
			<i class="el-icon-s-comment" @click="publishComment"></i>
			
		</div>
		</div>
	</div>
</template>

<script>
		import commentitem from '../components/commentitem.vue';
	export default {
		name: 'Home',
		components:{commentitem},
		data() {
			return {
				billId:0,
				commentList:[],
				commentText:'',
				replyText:'',
				commentPid:0,
				billItem:{},
				praiseFlag:false,
				fansFlag:false,
			}
		},
		methods: {
				//获取海报
			loadBills() {
				const loading = this.$loading({
					lock: true,
					text: '咕咕咕...咕咕..',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.get('/api/bill-infos/detail/'+this.billId,{
					headers:{
						Authorization:'Bearer '+localStorage.getItem("token")
					}
				}).then((result) => {
					console.log("getBills result", result);
					if (result.status == 200) {
						this.billItem = result.data;
					}
					loading.close();
					this.loadSubscribe();
				});
			},
			loadComment(){
				this.$http.get('/api/comment-infos/tree/'+this.billId,{
					headers:{
						Authorization:'Bearer '+localStorage.getItem("token")
					}
				}).then((result)=>{
					console.log("评论树获取完成",result);
					this.commentList=result.data;
				})
			},
			publishComment(){
				if(this.commentText.length==0){
					this.$message.info("请输入评论内容");
					return;
				}
				this.commentText=this.commentText.replace(this.replyText,"");
				this.$http.post('/api/comment-infos/add',{
					commentContent:this.commentText,
					commentPid:this.commentPid,
					billInfoId:this.billId
				},{
					headers:{
						Authorization:'Bearer '+localStorage.getItem("token")
					}
				}).then((result)=>{
					if(result.status==200){
						this.$message.success("已发送");
						this.commentText='';
						this.replyText='';
						this.commentPid=0;
						this.loadComment();
					}
				})

			},
			commentClick(commentItem){
				this.commentPid=commentItem.id;
				this.replyText="回复"+commentItem.author+"：";
				this.commentText="回复"+commentItem.author+"：";
			},
			deleteClick(commentItem){
					console.log("billDetail.vue deleteClick");
					this.$http.delete('/api/comment-infos/delete?id='+commentItem.id,{
						headers:{
							Authorization:'Bearer '+localStorage.getItem("token")
						}
					}).then((result)=>{
						if(result.status==200){
							this.$message.success("已删除");
							this.loadComment();
						}
					})
				
			},
			rootReply(){
				this.commentText='';
				this.replyText='';
				this.commentPid=0;
			},
			loadShoucang(){
				this.$http.get("/api/bill-favorites/status?billId="+this.billId,{
					headers:{
						Authorization:'Bearer '+localStorage.getItem("token")
					}
				}).then((result)=>{
					if(result.status==401){
						this.$router.push("login");
					}else if(result.status==200){
						if(result.data.id&& result.data.id>0){
							this.praiseFlag=true;
						}else{
							this.praiseFlag=false;
						}
					}
				}).catch((error)=>{
					this.praiseFlag=false;
				})
			},
			shoucang(){
				if(!this.praiseFlag){
					this.$http.post("/api/bill-favorites/add?billId="+this.billId,null,{
						headers:{
							Authorization:'Bearer '+localStorage.getItem("token")
						}
					}).then((result)=>{
						if(result.status==401){
							this.$router.push("login");
						}else if(result.status==200){
							this.praiseFlag=true;
						}
					}).catch((error)=>{
						this.praiseFlag=false;
					})
				}else{
					this.$http.delete("/api/bill-favorites/delete?billId="+this.billId,{
						headers:{
							Authorization:'Bearer '+localStorage.getItem("token")
						}
					}).then((result)=>{
						if(result.status==401){
							this.$router.push("login");
						}else if(result.status==200){
							this.praiseFlag=false;
						}
					}).catch((error)=>{
						
					})
				}
				
			},
			//获取关注状态
			loadSubscribe(){
				this.$http.get("/api//fans/check?loginName="+this.billItem.billUserName,{
					headers:{
						Authorization:'Bearer '+localStorage.getItem("token")
					}
				}).then((result)=>{
					if(result.status==401){
						this.$router.push("login");
					}else if(result.status==200){
						if(result.data.id&& result.data.id>0){
							this.fansFlag=true;
						}else{
							this.fansFlag=false;
						}
					}
				}).catch((error)=>{
					this.fansFlag=false;
				})
			},
			//添加关注
			doSubscribe(billItem){
				if(!this.fansFlag){
					this.$http.post("/api/fans/add?loginName="+this.billItem.billUserName,null,{
						headers:{
							Authorization:'Bearer '+localStorage.getItem("token")
						}
					}).then((result)=>{
						if(result.status==401){
							this.$router.push("login");
						}else if(result.status==200){
							this.fansFlag=true;
						}
					}).catch((error)=>{
						this.fansFlag=false;
					})
				}else{
					this.$http.delete("/api/fans/delete?loginName="+this.billItem.billUserName,{
						headers:{
							Authorization:'Bearer '+localStorage.getItem("token")
						}
					}).then((result)=>{
						if(result.status==401){
							this.$router.push("login");
						}else if(result.status==200){
							this.fansFlag=false;
						}
					}).catch((error)=>{
						
					})
				}
			}
},
		mounted() {
			console.log(this.$route);
			if(this.$route.query.id){
				this.billId=this.$route.query.id;
				this.loadBills();
				this.loadComment();
				this.loadShoucang();
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		outline: 0;
	}
	.page {
			font-family: "微软雅黑";
			margin: 0;
			padding: 0;
			width: 100%;
			min-height: 100vh;
			min-width: 900px;
			box-sizing: border-box;
			position: relative;
			display: block;
			background: url(../assets/b1.jpg);
		}
		.bill-list{
			width: 900px;
			min-height: 450px;
			background: #ffffff;
			position: relative;
			margin: 0 auto;
			padding: 30px 32px;
			padding-top: 40px;
			box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.3);
			display: block;
		}
		.bill-item{
			width:800px;
			height:450px;
			margin:10px auto;
			background: #fff;
			display: flex;
			flex-direction: column;
		}
		.top{
			width: 690rpx;
			display: flex;
			flex-direction: row;
		}
		.top-left{
			padding-left: 10px;
			flex:1;
		}
		.top-right{
			padding-right: 20px;
			width: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.bill-title{
			font-weight: 900;
			padding-top: 10px;
				margin-top: 10px;
				margin-bottom: 5px;
				font-size: 170%;
				color: #404040;
				font-weight: 900;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
		}
		
		.bill-word {
			margin-top: 5px;
			margin-bottom: 5px;
			display: flex;
			flex-direction: row;
		}
		.bill-follow{
			border:1px solid rgba(69,69,69,0.2);
			border-radius: 5px;
			padding:5px 10px;
			color: #404040;
		}
		.bill-image{
			width: 900rpx;
			height: calc(900rpx * 0.618);
			overflow: hidden;
		}
		.bill-image image{
			width:100%;
			height:100%;
		}
		.time{
			width: 90rpx;
			font-size: 100%;
			color: #808080;
		}
		.bill-time{
			padding-right: 20px;
			padding-top: 10px;
			font-size: 100%;
			color: #808080;
			display: flex;
			justify-content: flex-end;
		}
		.box{
			margin-top:5px;
			margin-bottom: 5px;
			padding: 5px 50px;
			display:flex;
			justify-content: flex-end;
			
		}
		.box i{
			font-size:150%;
			padding-right: 20px;
		}
		.bottom-input{
			width:calc(100% - 40px);
			position: fixed;
			bottom: 0;
			left: 20px;
			
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height:44px;
			line-height: 44px;
			background-color: rgba(220,220,220,1);
		}
		
		.bottom-input input{
			flex:1;
			padding-left:15px;
		}
		.bottom-input i{
			width:44px;
			height:44px;
			text-align: center;
			line-height: 44px;
			font-size:180%;
		}
</style>
